.server {
  width: 100vw;
  height: 100vh;
}

.server .mian {
  width: 100%;
  height: calc(100% - 110px);
}

.server .mian .listBox {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.server .mian .listBox .listItem {
  width: 100%;
  display: flex;
  padding: 10px;
}

.server .mian .listBox .listItem .imgBox {
  width: 40px;
  height: 40px;
  border-radius: 25%;
}

.server .mian .listBox .listItem .msgbox {
  background-color: #ccc;
  border-radius: 20px;
  padding: 10px;
}

.server .mian .listBox .listItem2 {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  padding: 10px;
}

.server .mian .listBox .listItem2 .imgBox {
  width: 40px;
  height: 40px;
  border-radius: 25%;
}

.server .mian .listBox .listItem2 .msgbox {
  background-color: greenyellow;
  border-radius: 20px;
  padding: 10px;
}

.server .footer {
  width: 100%;
  height: 60px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
}

.server .footer input {
  flex: 1;
  margin-right: 10px;
}

.server .footer button {
  border-radius: 20px;
  border: none;
  background-color: blue;
  color: #fff;
  padding: 10px 20px;
}
